
<style>
    .keys-container .input-group-addon {
        top: 0;
        right: 0;
        color: #eee;
        width: 25px;
        padding: 7px;
        position: absolute;
        margin-top: -1px;
        text-align: center;
        background: #393D49
    }

    .keys-container [data-tips-image] {
        width: 112px;
        height: auto
    }

    .keys-container .layui-card {
        width: 580px;
        height: 578px;
        position: absolute;
        border: 1px solid #ccc
    }

    .keys-container .layui-card .layui-card-body {
        height: 515px;
        padding-right: 50px
    }
    .think-box-shadow {
        padding: 20px!important;
        background: #fff!important;
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.22);
        border-radius: 5px;
    }
    .nowrap {
        white-space: nowrap!important;
    }
    .padding-bottom-10 {
        padding-bottom: 10px!important;
    }
    .text-center {
        text-align: center!important;
    }
    .full-width {
        width: 100%!important;
    }
    .margin-right-15 {
        margin-right: 15px!important;
    }
    .margin-left-10 {
        margin-left: 10px!important;
    }
    .inline-block {
        display: inline-block!important;
    }
    .absolute {
        position: absolute!important;
    }
    .mobile-preview {
        width: 317px;
        height: 580px;
        position: relative;
        background: url(/static/manage/images/mobile_head.png) no-repeat 0 0;
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.11);
        border-radius: 5px
    }

    .mobile-preview .mobile-header {
        color: #fff;
        width: auto;
        margin: 0 30px;
        overflow: hidden;
        font-size: 15px;
        padding-top: 30px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        pointer-events: none;
        -webkit-pointer-events: none
    }

    .mobile-preview .mobile-body {
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #ccc;
        position: absolute;
        background: #f5f5f5;
        border-radius: 0 0 5px 5px
    }

    .mobile-preview .mobile-body iframe {
        width: 100%;
        height: 100%
    }

    .mobile-preview .mobile-footer {
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border: 1px solid #ccc;
        position: absolute;
        padding-left: 43px;
        background: url(../img/wechat/mobile_foot.png) no-repeat 0 0;
        list-style-type: none;
        border-radius: 0 0 5px 5px
    }

    .mobile-preview .mobile-footer li {
        float: left;
        width: 33.33%;
        position: relative;
        text-align: center;
        line-height: 50px
    }

    .mobile-preview .mobile-footer li a {
        width: auto;
        color: #616161;
        border: 1px solid hsla(0,0%,100%,0);
        display: block;
        overflow: hidden;
        word-wrap: normal;
        margin-top: -1px;
        border-left: 1px solid #e7e7eb;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: -1px;
        text-decoration: none
    }

    .mobile-preview .mobile-footer li a:hover {
        background: rgba(0,0,0,.02)
    }

    .mobile-preview .mobile-footer li a.active {
        border: 1px solid #44b549!important;
        box-shadow: 0 0 1px #44b549
    }

    .mobile-preview .mobile-footer li a span:before {
        width: 1px;
        height: 1px;
        content: '';
        display: inline-block
    }

    .mobile-preview .mobile-footer li>.close {
        top: 1px;
        right: 1px;
        width: 18px;
        height: 18px;
        display: none;
        cursor: pointer;
        position: absolute;
        text-align: center;
        line-height: 18px
    }

    .mobile-preview .mobile-footer li:hover>.close {
        display: inline-block
    }

    .mobile-preview .mobile-footer li:hover>.close:hover {
        color: #fff!important;
        background: #999!important
    }

    .mobile-preview .mobile-footer .icon-add,.mobile-preview .mobile-footer .icon-sub {
        display: inline-block;
        vertical-align: middle
    }

    .mobile-preview .mobile-footer .icon-add {
        width: 14px;
        height: 14px;
        border-bottom: none!important;
        background: url(../img/wechat/index.png) 0 0 no-repeat
    }

    .mobile-preview .mobile-footer .icon-sub {
        width: 7px;
        height: 7px;
        margin-right: 2px;
        background: url(../img/wechat/index.png) 0 -3pc no-repeat
    }

    .mobile-preview .mobile-footer .sub-menu {
        width: 100%;
        bottom: 60px;
        margin: -1px;
        display: block;
        position: absolute;
        border: 1px solid #d0d0d0;
        background-color: #fafafa
    }

    .mobile-preview .mobile-footer .sub-menu ul li {
        float: none;
        width: 100%;
        padding: 0;
        z-index: 11;
        display: block
    }

    .mobile-preview .mobile-footer .sub-menu ul li a {
        padding: 0 5px;
        border: 1px solid hsla(0,0%,100%,0)
    }

    .mobile-preview .mobile-footer .sub-menu ul li a.bottom-border {
        margin: -1px -1px 0;
        border-bottom: 1px solid #e7e7eb
    }

    .mobile-preview .mobile-footer .sub-menu ul li:last-child a.bottom-border {
        border-bottom-color: #fff
    }

    .mobile-preview .mobile-footer .arrow {
        left: 50%;
        position: absolute;
        margin-left: -6px
    }

    .mobile-preview .mobile-footer .arrow_in,.mobile-preview .mobile-footer .arrow_out {
        width: 0;
        height: 0;
        z-index: 10;
        border: 6px dashed transparent;
        display: inline-block;
        border-top-style: solid;
        border-bottom-width: 0
    }

    .mobile-preview .mobile-footer .arrow_in {
        z-index: 3;
        bottom: -5px;
        border-top-color: #fafafa
    }

    .mobile-preview .mobile-footer .arrow_out {
        z-index: 2;
        bottom: -6px;
        border-top-color: #d0d0d0
    }
    .think-radio{
        cursor: pointer;
        display: inline-block;
        margin-top: 4px;
        font-weight: 400;
        line-height: 18px;
    }
    .layui-form-radio{
         width: 18px;
         height: 18px;
         cursor: pointer;
         padding: 0;
         position: relative;
         background: #fff;
         vertical-align: bottom;
         display: inline-block!important;
         box-sizing: border-box!important;
         appearance: none;
         -webkit-appearance: none;
         line-height: 18px;

        margin: 0;
    }
    .layui-form-radio>i{
        font-size: 18px!important;
        margin: 0!important;
    }
    .help-block{
        margin-left: 130px;
        color: #999;
        font-size: 12px;
        line-height: 24px;

        margin-block-start: 1em;
        margin-block-end: 0px;
        margin-inline-start: 130px;
        margin-inline-end: 0px;
    }

</style>
<div class="nowrap think-box-shadow" style="width:910px">
    <div class='mobile-preview inline-block'>
        <div class='mobile-header'>公众号</div>
        <div class='mobile-body'>
            <iframe id="phone-preview" frameborder="0" marginheight="0" marginwidth="0"></iframe>
        </div>
    </div>
    <div class="keys-container inline-block absolute margin-left-10 margin-right-15">
        <form class="layui-form" autocomplete="off" data-auto="true" method="post">
            <div class="layui-card relative">
                <div class="layui-card-header layui-bg-gray text-center">编辑关键字</div>
                <div class="layui-card-body">
                    {if isset($keysDefault) and ($keysDefault neq 'default' and $keysDefault neq 'subscribe')}
                    <div class="layui-form-item margin-top-10">
                        <label class="layui-form-label">关 键 字</label>
                        <div class="layui-input-block">
                            <input required placeholder='请输入关键字' maxlength='20' name='keys' class="layui-input" value='{$vo.keys|default=""}'>
                        </div>
                    </div>
                    {else}
                    <input type="hidden" name="keys" value="{$keysDefault}">
                    {/if}
                    {if isset($keysDefault) and ($keysDefault neq 'default' and $keysDefault neq 'subscribe')}
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required">应用类型</label>
                        <div class="layui-input-block">
                            {foreach ['1'=>'公众号','0'=>'小程序'] as $k=>$v}
                            <label class="think-radio">
                                {if $k eq '1'}
                                <input type="radio" checked name="miniapp_type" value="{$k}"> {$v}
                                {else}
                                <input type="radio" name="miniapp_type" value="{$k}"> {$v}
                                {/if}
                            </label>
                            {/foreach}
                        </div>
                    </div>
                    {/if}
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required">规则状态</label>
                        <div class="layui-input-block">
                            {foreach ['1'=>'启用','0'=>'禁用'] as $k=>$v}
                            <label class="think-radio">
                                <!--{if (!isset($vo.status) and $k eq '1') or (isset($vo.status) and $vo.status eq $k)}-->
                                <input type="radio" checked name="status" value="{$k}"> {$v}
                                <!--{else}-->
                                <input type="radio" name="status" value="{$k}"> {$v}
                                <!--{/if}-->
                            </label>
                            {/foreach}
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label label-required">消息类型</label>
                        <div class="layui-input-block">
                            {foreach $msgTypes as $k=>$v}
                            <label class="think-radio">
                                <!--{if (!isset($vo.type) and $k eq 'text') or (isset($vo.type) and$vo.type eq $k)}-->
                                <input name="type" checked type="radio" value="{$k}"> {$v}
                                <!--{else}-->
                                <input name="type" type="radio" value="{$k}"> {$v}
                                <!--{/if}-->
                            </label>
                            {/foreach}
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='text'>
                        <label class="layui-form-label">回复内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" maxlength="10000" class="layui-textarea">{$subscribeData.content|raw|default='说点什么吧'}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='news'>
                        <label class="layui-form-label label-required">选取图文</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="news_id" value="{$subscribeData.news_id|default=0}" data-my="123123">
                            <a class="layui-btn layui-btn-primary" data-title="选择图文" data-open="member.wechatKeyword/select?field={:encode_str('news_id')}&miniapp_id={$member_miniapp_id}">选择图文</a>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='image'>
                        <label class="layui-form-label required">图片地址</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="image_url" class="layui-input layui-col-xs6" value="{$subscribeData.image_url|default=$defaultImage}"  placeholder="请上传图片或输入图片URL地址">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="image_url" data-upload-number="one" data-upload-exts="bmp|png|jpg|gif|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_image_url" data-upload-select="image_url" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>
                        <p class="help-block">文件最大2Mb，支持bmp/png/jpeg/jpg/gif格式</p>
                    </div>

                    <div class="layui-form-item" data-keys-type='voice'>
                        <label class="layui-form-label required">上传语音</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="voice_url" class="layui-input layui-col-xs6" value="{$subscribeData.voice_url|default=''}"  placeholder="上传语音文件或输入语音URL地址">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="voice_url" data-upload-number="one" data-upload-exts="mp3|wav|wma|amr" data-upload-icon="file"><i class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_voice_url" data-upload-select="voice_url" data-upload-number="one" data-upload-mimetype="audio/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>
                        <p class="help-block">文件最大2Mb，播放长度不超过60s，mp3/wma/wav/amr格式</p>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label">音乐标题</label>
                        <div class="layui-input-block">
                            <input class='layui-input' value="{$subscribeData.music_title|default='音乐标题'}" name="music_title" required title="请输入音乐标题">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label required">上传音乐</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="music_url" class="layui-input layui-col-xs6" value="{$subscribeData.music_url|default=''}"  placeholder="上传音乐文件或输入音乐URL地址">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="music_url" data-upload-number="one" data-upload-exts="mp3|wav|wma" data-upload-icon="file"><i class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_music_url" data-upload-select="music_url" data-upload-number="one" data-upload-mimetype="audio/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label">音乐描述</label>
                        <div class="layui-input-block">
                            <input name="music_desc" class="layui-input" value="{$subscribeData.music_desc|default='音乐描述'|raw}">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='music'>
                        <label class="layui-form-label required">音乐图片</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="music_image" class="layui-input layui-col-xs6" placeholder="上传音乐图片或输入音乐图片URL地址" value="{$subscribeData.music_image|default=''}">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="music_image" data-upload-number="one" data-upload-exts="jpg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_music_image" data-upload-select="music_image" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>
                        <p class="help-block">文件最大64KB，只支持JPG格式</p>
                    </div>

                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label">视频标题</label>
                        <div class="layui-input-block">
                            <input class='layui-input' value="{$subscribeData.video_title|default='视频标题'}" name="video_title" required placeholder="请输入视频标题">
                        </div>
                    </div>

                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label">视频描述</label>
                        <div class="layui-input-block">
                            <input value="{$subscribeData.video_desc|default='视频描述'}" name="video_desc" maxlength="50" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" data-keys-type='video'>
                        <label class="layui-form-label required">上传视频</label>
                        <div class="layui-input-block layuimini-upload">
                            <input name="video_url" class="layui-input layui-col-xs6" value="{$subscribeData.video_url|default=''}"  placeholder="上传视频或输入音乐视频URL地址">
                            <div class="layuimini-upload-btn">
                                <span><a class="layui-btn" data-upload="video_url" data-upload-number="one" data-upload-exts="mp4" data-upload-icon="file"><i class="fa fa-upload"></i> 上传</a></span>
                                <span><a class="layui-btn layui-btn-normal" id="select_video_url" data-upload-select="video_url" data-upload-number="one" data-upload-mimetype="video/*"><i class="fa fa-list"></i> 选择</a></span>
                            </div>
                        </div>
                        <p class="help-block">文件最大10MB，只支持MP4格式</p>
                    </div>

                    <div class="text-center padding-bottom-10 absolute full-width" style="bottom:0;margin-left:-15px">
                        <div class="hr-line-dashed margin-top-10 margin-bottom-10"></div>
                        <button class="layui-btn menu-submit" lay-submit>提交保存</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var subscribeType = "{$subscribeData.type|default=''}";
</script>